body {
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.clearfix:before, .clearfix:after{
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}
.box {
  height: 350px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.banner {
  position: absolute;
  left: 0;
  top: 0;
}
.banner li {
  float: left;
  
}
.banner img {
  display: block;
}

.progress {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 0;
  width: 100%;
  text-align: center;
}
.progress i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: solid 1px #fff;
}
.progress .active {
  background: #fff;
}